/* @flow */

import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  FlatList,
  TouchableOpacity,
} from 'react-native';
var ItemHeight =80;
var Dimensions = require('Dimensions');

var {width} = Dimensions.get('window');
var {height} = Dimensions.get('window');
export default class HTBroadCastListScene extends Component {
  static navigationOptions = ({navigation})=>({

    header: <View></View>,

    headerLeft:(
      <TouchableOpacity
        onPress={
          ()=>navigation.goBack()
        }
        >
          <Text style={{color:'blue',marginLeft:20}}>返回</Text>

        </TouchableOpacity>
    ),

    headerTitle:navigation.state.params.broadCastList.title,//'主播列表',//navigate.AllAnchor.anchorList, //'主播列表',//this.navigation.state.params.AllAnchor.allAnchor,

    headerStyle:{backgroundColor:'#c6dbb8'}

  })

  constructor(props){
    super(props);

    var {state,navigate} = this.props.navigation
    let tagID = state.params.broadCastList && state.params.broadCastList.id?state.params.broadCastList.id:'';

    this.state = {
      dataSource:[],
      tagID:tagID,
      page:0,
      refreshing:false,
    }
  }

  _flatList


  componentWillMount(){
    console.log('./././././.=======a'+this.state.page);
        this.fetchData('http://bapi.xinli001.com/fm2/broadcast_list.json/?rows=15&key=c0d28ec0954084b4426223366293d190&tag='+this.state.tagID+'&offset='+this.state.page);
    }


  fetchData = (url) => {
    fetch(url,{
      method:'GET',
      headers:{
       'Content-Type': 'application/json'
    },
    }).then((response)=>response.json())
    .then((responseData)=>{
      console.log(responseData.data);
        this.setState({
          dataSource:this.state.dataSource.concat(responseData.data),
          refreshing:false,
        });

      });

  }



  _broadCastOnRefresh = ()=>{
    this.setState({
       page:this.state.page+=15,
      refreshing:true,
    });
    console.log('./././././.=======b'+this.state.page);
    this.fetchData('http://bapi.xinli001.com/fm2/broadcast_list.json/?rows=15&key=c0d28ec0954084b4426223366293d190&tag='+this.state.tagID+'&offset='+this.state.page);
  }

  _broadCastOnEndReached =()=>{
    this.setState({
       page:this.state.page+=15,
      refreshing:true,
    });
    console.log('./././././.=======b'+this.state.page);
    this.fetchData('http://bapi.xinli001.com/fm2/broadcast_list.json/?rows=15&key=c0d28ec0954084b4426223366293d190&tag='+this.state.tagID+'&offset='+this.state.page);
  }

  _broadCastSeparate =()=>{
    return <View style ={{height:1,backgroundColor:'#e2dbdd',width:width-20,}}/>

  }
  _broadCastKeyExtractor = (item, index) => item.id;


  _broadCastRenderItem =({item,index})=>{
    console.log(item.title);
    return(
      <TouchableOpacity activeOpacity ={0.5} >
      <View  style={styles.cellStyle}>
        <View style = {styles.lefViewStyle}>
        <Image source={{uri:item.cover}} style={styles.leftImageStyle}/>
        </View>
          <View style = {styles.rightInViewStyle}>
            <Text style={styles.topContentStyle}>{item.title}</Text>
            <Text style={styles.middleContentStyle}>{'主播 '+item.speak}</Text>
            <Text style={styles.bottomContentStyle}>{'收听量 '+item.viewnum}</Text>

          </View>
        </View>
    </TouchableOpacity>
    );


  }
  _listEmptyComponent=()=>{
    return <View style={{width:width,height:height,backgroundColor:'#eeeeee'}}></View>

  }


broadCastHeaderView = () => {
  return(
    <View style={styles.headerTopHeaderViewStyle}>
      <TouchableOpacity onPress={()=>this.props.navigation.goBack()}>
        <Image source={require('../../img/findicon/back.png')} style={{width:24,height:24,}}/>
      </TouchableOpacity>
      <Text>{this.props.navigation.state.params.broadCastList.title}</Text>
      <Image source={require('../../img/findicon/littlePlaying1.png')} style={{width:17,height:17,}}/>
    </View>
  );
}



  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerViewStyle
        }>
          {this.broadCastHeaderView()}
          <View style={styles.bottomViewStyle}></View>
        </View>
        <FlatList
          ref={(flatList)=>this._flatList = flatList}
          ItemSeparatorComponent = {this._broadCastSeparate}//分割线组件，
          keyExtractor={this._broadCastKeyExtractor}
          renderItem = {this._broadCastRenderItem}
          data={this.state.dataSource}
          ListEmptyComponent={this._listEmptyComponent}
          // horizontal={true}
          // numColumns ={cols}//列数 组件内元素必须是等高的,无法支持瀑布流布局
          // columnWrapperStyle={{borderWidth:2,borderColor:'black',paddingLeft:0}}//numColumns大于1时，设置每行的样式
          getItemLayout={(data,index)=>({length: ItemHeight, offset: (ItemHeight+20) * index, index})}
           onEndReached={this._broadCastOnEndReached}
           onEndReachedThreshold ={0}
          onRefresh = {this._broadCastOnRefresh}//在视图开始刷新时调用。指定一个刷新方法，在下拉开始时调用。
          refreshing = {this.state.refreshing}//视图是否应该在刷新时显示指示器
          onViewableItemsChanged={({viewableItems,changed})=>{
          // console.log(changed);
          }}//当一个新的Item渲染或者隐藏 的时候调用此方法。

          ></FlatList>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  headerViewStyle:{
    backgroundColor:'transparent',
    height:64,
    width:width,
    flexDirection:'column',
    justifyContent:'flex-end',
  },
  headerTopHeaderViewStyle:{
    backgroundColor:'transparent',
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginLeft:10,
    marginRight:10,
    marginBottom:10,
  },
  bottomViewStyle:{
    backgroundColor:'#6b6b6b',
    width:width,
    height:.5,
    marginBottom:1,
  },
  cellStyle:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    // width:width,
    // height:60,
  },
  lefViewStyle:{
    width:80,
    height:100,
    backgroundColor:'transparent',
    alignItems:'center',
    justifyContent:'center',
  },
  leftImageStyle:{
    width:70,
    height:80,

  },
  rightInViewStyle:{
    width:width-80-15,
    height:70,
    backgroundColor:'transparent',
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'flex-start',
    marginRight:0,
    marginLeft:15,
  },
  topContentStyle:{
    width:width-80-15,
    height:25,
    backgroundColor:'transparent',

  },
  middleContentStyle:{
    width:width-80-15,
    height:25,
    backgroundColor:'transparent',
    color:'#6a6b69',
  },
  bottomContentStyle:{
    width:width-80-15,
    height:25,
    backgroundColor:'transparent',
    color:'#6a6b69',

  },
});
